在行中显示数据
本示例展示如何使用 List 组件，通过自定义的行布局来展示结构化数据。每一行显示一个人的姓名和电话号码，布局清晰，排版整洁，采用了 SwiftUI 风格的堆叠式组件。
概览
你将学到如何：
- 定义自定义的行组件（
PersonRowView）
- 使用
List 展示数据集合
- 应用文本样式和系统图标
- 使用
VStack 和 HStack 进行布局排版
示例代码
1. 导入依赖并定义数据类型
1import { HStack, Label, List, Navigation, NavigationStack, Script, Text, VStack } from "scripting"
2
3type Person = {
4 name: string
5 phoneNumber: string
6}
2. 创建行组件
PersonRowView 是用于渲染单行内容的组件。它使用纵向堆叠将姓名与电话号码分隔，并使用适当的字体样式和颜色来区分信息层级。
1function PersonRowView({
2 person
3}: {
4 person: Person
5}) {
6 return <VStack
7 alignment={"leading"}
8 spacing={3}
9 >
10 <Text
11 foregroundStyle={"label"}
12 font={"headline"}
13 >{person.name}</Text>
14 <HStack
15 spacing={3}
16 foregroundStyle={"secondaryLabel"}
17 font={"subheadline"}
18 >
19 <Label
20 title={person.phoneNumber}
21 systemImage={"phone"}
22 />
23 </HStack>
24 </VStack>
25}
3. 在导航堆栈中展示列表
使用 NavigationStack 和 List 来展示所有的行。你可以设置导航栏标题以说明视图内容。
1function Example() {
2 const staff: Person[] = [
3 {
4 name: "Juan Chavez",
5 phoneNumber: "(408) 555-4301",
6 },
7 {
8 name: "Mei Chen",
9 phoneNumber: "(919) 555-2481"
10 }
11 ]
12
13 return <NavigationStack>
14 <List
15 navigationTitle={"Display data inside a row"}
16 navigationBarTitleDisplayMode={"inline"}
17 >
18 {staff.map(person =>
19 <PersonRowView
20 person={person}
21 />
22 )}
23 </List>
24 </NavigationStack>
25}
4. 展示界面并退出脚本
使用 Navigation.present 弹出该页面视图，并在页面关闭后退出脚本。
1async function run() {
2 await Navigation.present({
3 element: <Example />
4 })
5
6 Script.exit()
7}
8
9run()
总结
本示例展示了如何在行中展示数据，核心要点包括：
- 使用
VStack 和 HStack 构建布局结构
- 定义可复用的类型化行组件
- 使用
List 渲染结构化的数据集合
- 搭配图标和标签增强可读性和视觉效果
适用于联系人列表、搜索结果、记录信息等多种数据展示场景，支持灵活扩展与样式自定义。
